<template>
  <div class="vector">
    <button type="button" class="btn cube cube-hover">
      <div class="bg-top">
        <div class="bg-inner"></div>
      </div>
      <div class="bg-right">
        <div class="bg-inner"></div>
      </div>
      <div class="bg">
        <div class="bg-inner"></div>
      </div>
      <div class="text">Hover Me1</div>
    </button>

    <button type="button" class="btn2">
      <div class="text">Hover Me2</div>
    </button>

    <button type="button" class="btn3">
      <div class="text">Hover Me3</div>
    </button>

    <button type="button" class="btn4">
      <div class="text">Hover Me4</div>
    </button>

    <button type="button" class="btn5">
      <div class="text">Hover Me5</div>
    </button>

    <button type="button" class="btn6">
      <div class="text">Hover Me6</div>
    </button>

    <button type="button" class="btn7">
      <div class="text">Hover Me7</div>
    </button>

    <button type="button" data-text="Awesome" class="btn8">
      <span class="actual-text">&nbsp;HoverMe&nbsp8</span>
      <span class="hover-text" aria-hidden="true">&nbsp;HoverMe&nbsp;8</span>
    </button>

    <button type="button" class="btn9">
      <span>纵 横</span>
    </button>

    <div class="wrapper">
      <input type="checkbox" name="checkbox" class="switch">
    </div>

  </div>
</template>

<script>
export default {
  name: "Button"
}
</script>

<style scoped>
@import "../style/css/button.css";
</style>